<template>
  <div id="wantBuy" class="flex flex-col w-full h-full">
    <div>
      <div
          class="w-full h-122 pl-40 pr-31 box-border flex text-white items-center"
      >
        <van-icon class="c2cColor" name="arrow-left" @click="$router.back()"/>
        <div class="flex-1 text-right mr-100" @click="showPopup">
          <span class="font-35 font-700 mr-8 titleColor">{{ $t('快捷区') }}</span>
          <van-icon name="arrow-down" class="c2cColor"/>
        </div>
        <van-popup round position="top" v-model="show" :closeable="true">
        <span class="w-232 font-28 c2cColor font-500 ml-32 block mt-20">{{
          $t('选择交易区')
        }}</span>
          <div class="flex justify-around c2cColor mt-40 pb-48">
            <div class="flex flex-col items-center" @click="show=false">
              <img
                  class="w-56 h-56"
                  src="@/assets/image/otc/wantBuyHead/fast.png"
                  alt=""
              />
              <span class="font-24 mt-10 h-32 font-500">{{ $t('快捷区') }}</span>
            </div>
            <div class="flex flex-col items-center" @click="$router.push({
              path: '/wantBuy'
            })">
              <img
                  class="w-56 h-56"
                  src="@/assets/image/otc/wantBuyHead/optional.png"
                  alt=""
              />
              <span class="font-24 mt-10 font-500">{{ $t('自选区') }}</span>
            </div>
          </div>
        </van-popup>
        <div
            class="w-232 h-64 px-23 box-border box-radius textColor flex justify-around items-center tabBackground"
        >
          <div
              class="flex items-center"
              @click="$router.push({
                path: '/selectLegalCurrency'
              })"
          >
            <span class="mr-15 font-31 font-400">{{ exchangeCurrency }}</span>
            <img
                class="w-24 h-20"
                :src="require('@/assets/image/otc/wantBuyHead/Group.png')"
                alt=""
            />
          </div>
          <span class="w-2 h-36">|</span>
          <van-popover
              get-container="#quick"
              v-model="showPopover"
              :actions="actions"
              @select="onSelect"
              placement="bottom-end"
              theme="dark"
              :offset="[20, 20]"
          >
            <template #reference>
              <img
                  @click="showPopover = !showPopover"
                  class="relative bottom-4 w-24 h-6 list-img"
                  :src="require('@/assets/image/otc/wantBuyHead/Group2.png')"
                  alt=""
              />
            </template>
          </van-popover>
        </div>
      </div>
      <div class="px-32 pb-42 type">
        <div class="flex items-center font-36 ">
          <div
              :class="{'active': isBuy}"
              @click="isBuy = true"
          >{{$t('我要买')}}
          </div>
          <div class="w-34 h-1 mx-20" style="transform: rotate(90deg);background:#EAEBEE"></div>
          <div
              :class="{'active': !isBuy}"
              @click="isBuy = false"
          >{{$t('我要卖')}}
          </div>
        </div>
        <div class="flex mt-40 currency text-center">
          <div
              v-for="(item, index) in currency"
              :key="index"
              :class="{'active': activeCurrency === item.title}"
              @click="changeTab(item)"
          >
            <p>{{ item.title }}</p>
            <p>{{ item.label }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full flex-1 px-32 pt-36 box-border mainBackground">
      <div class="px-32 py-40 c2cTabBackground item" v-show="isBuy">
        <div v-show="order_type === 'Amount'">
          <div class="mb-18 textColor1" >{{ $t('购买金额')}}</div>
          <div class="w-full relative box-border rounded-xl inputBackground1 input">
            <span class="font-32 absolute left-22 text font-700 c2cColor">{{currencySymbol}}</span>
            <input
                class="w-full font-36 h-110 rounded-xl border-none box-border pl-94 inputBackground1 c2cColor"
                type="number"
                :placeholder="$t('最小金额')+100"
                v-model="buyAmount"
            >
          </div>
          <div class="flex justify-between mt-28 font-24">
            <div class="text-grey">{{ $t('参考单价')}}&nbsp;{{ currencySymbol }}{{referPrice}} </div>
            <div class="flex items-center text-blue" @click="changeOrderType('Num')">
              <span class="mr-11">{{ $t('按数量购买')}}</span>
              <img class="w-24 h-24" :src="require('@/assets/image/c2c/Group241.png')" alt="">
            </div>
          </div>
        </div>
        <div v-show="order_type === 'Num'">
          <div class="flex justify-between mb-18" >
            <span class="textColor1">{{ $t('购买数量')}}</span>
          </div>
          <div class="w-full relative box-border rounded-xl inputBackground1 input">
            <input
                class="w-full font-36 h-110 rounded-xl border-none box-border pl-38 inputBackground1 c2cColor"
                type="number"
                :placeholder="$t('请输入数量')"
                v-model="buyNum"
            >
            <span class="font-28 absolute right-19 text" style="color: #1A6EBD;">
            <span class="mr-22 c2cColor">{{ activeCurrency }}</span>
          </span>
          </div>
          <div class="flex justify-between mt-28 font-24">
            <div class="text-grey">{{ $t('参考单价')}}&nbsp;{{ currencySymbol }}{{ referPrice }}</div>
            <div class="flex items-center text-blue" @click="changeOrderType('Amount')">
              <span class="mr-11">{{ $t('按金额购买')}}</span>
              <img class="w-24 h-24" :src="require('@/assets/image/c2c/Group241.png')" alt="">
            </div>
          </div>
        </div>
        <div class="mt-76">
          <van-button
              class="w-full h-80 font-32 rounded-xl"
              type="primary"
              color="#2EBD85"
              @click="handleClick"
          >{{ $t('0手续费购买')}}
          </van-button>
        </div>
      </div>
      <div class="px-32 py-40 c2cTabBackground item" v-show="!isBuy">
        <div v-show="order_type === 'Num'">
          <div class="flex justify-between mb-18" >
            <span class="textColor1">{{ $t('出售数量')}}</span>
            <span
                class="font-24 text-blue" style="text-decoration: underline"
                @click="isBuy = !isBuy"
            >{{ $t('划转')}}</span>
          </div>
          <div class="w-full relative box-border rounded-xl inputBackground1 input">
            <input
                class="w-full font-36 h-110 rounded-xl border-none box-border pl-38 inputBackground1 c2cColor"
                type="number"
                :placeholder="$t('请输入数量')"
                v-model="sellNum"
            >
            <span class="font-28 absolute right-19 text" style="color: #1A6EBD;">
            <span class="mr-22 c2cColor">{{ activeCurrency }}</span>
          </span>
          </div>
          <div class="flex justify-between mt-28 font-24">
            <div class="text-grey">{{ $t('参考单价')}}&nbsp;{{ currencySymbol }}{{ referPrice }}</div>
            <div class="flex items-center text-blue" @click="order_type = 'Amount'">
              <span class="mr-11">{{ $t('按金额出售')}}</span>
              <img class="w-24 h-24" :src="require('@/assets/image/c2c/Group241.png')" alt="">
            </div>
          </div>
        </div>
        <div v-show="order_type === 'Amount'">
          <div class="flex justify-between mb-18" style="color: #595C61">
            <span class="textColor1">{{ $t('出售金额')}}</span>
            <span
                class="font-24 text-blue" style="text-decoration: underline"
                @click="$router.push('/exchange/exchangePage')"
            >{{ $t('划转')}}</span>
          </div>
          <div class="w-full relative box-border rounded-xl inputBackground1 input">
            <div class="w-full relative box-border rounded-xl inputBackground1 input">
              <span class="font-32 absolute left-22 text font-700 c2cColor">{{ currencySymbol }}</span>
              <input
                  class="w-full font-36 h-110 rounded-xl border-none box-border pl-94 inputBackground1 c2cColor"
                  type="number"
                  :placeholder="$t('最小金额')+100"
                  v-model="sellAmount"
              >
            </div>
          </div>
          <div class="flex justify-between mt-28 font-24">
            <div class="text-grey">{{ $t('参考单价')}}&nbsp;{{ currencySymbol }}{{ referPrice }}</div>
            <div class="flex items-center text-blue" @click="order_type = 'Num'">
              <span class="mr-11">{{ $t('按数量出售')}}</span>
              <img class="w-24 h-24" :src="require('@/assets/image/c2c/Group241.png')" alt="">
            </div>
          </div>
        </div>
        <div class="mt-76">
          <van-button
              class="w-full h-80 font-32 rounded-xl"
              type="primary"
              color="#E35461"
              @click="handleClick"
          >{{ $t('0手续费出售')}}
          </van-button>
        </div>
      </div>
    </div>

    <van-popup v-model="enterTrade" position="bottom">
      <enter-trade
           v-if="paymentMethod.length"
          :type="fullType"
          :payment-method="paymentMethod"
          :info="info"
          :session-token="session_token"
          :symbol="activeCurrency"
          :exchangeCurrency="exchangeCurrency"
          @updataToken="updataToken"
          @close="enterTrade = false"
      />
    </van-popup>
  </div>
</template>

<script>
import otcApi from "@/API/otc";

import {
  Icon,
  Popup,
  Popover,
  Button,
  Toast,
} from "vant";

import EnterTrade from "@/page/quick/EnterTrade";
import { mapGetters } from "vuex";
export default {
  name: "index",
  data() {
    return {
      referPrice:'--',
      paymentMethod: [],
      order_type: 'Amount',
      enterTrade: false,
      isBuy: true, // 模式
      activeCurrency: 'USDT',
      show: false,
      showPopover: false,
      currency: [
        {
          title: 'USDT',
          label: this.$t('计价币种')
        },
        {
          title: 'BTC',
          label: this.$t('最知名币种')
        },
        {
          title: 'ETH',
          label: this.$t('以太坊')
        }
      ],
      actions: [
        {
          text: this.$t('收款方式'),
          icon: require('@/assets/image/otc/buy/collection_icon.png'),
          path: '/paymentMethod',
        },
        // {
        //   text: this.$t('c2c帮助中心'),
        //   icon: require('@/assets/image/otc/buy/help_icon.png'),
        //   path: '/c2cHelpCenter',
        // },
        // {
        //   text: 'c2c用户中心',
        //   icon: require('@/assets/image/otc/buy/user_icon.png'),
        //   path: '/c2c/c2cUser',
        // },
        // {
        //   text: this.$t('接单模式'),
        //   icon: require('@/assets/image/otc/buy/order_icon.png'),
        // },
      ],
      session_token: '',

      buyAmount: '',
      buyNum: '',
      sellAmount: '',
      sellNum: '',
      info: {},
      all_price:{},
      isPay:false
    }
  },
  created() {
    otcApi.getSessionToken({
      currency: this.exchangeCurrency
    }).then(res => {
      this.session_token = res.data.session_token;
      console.log(this.activeCurrency.toLowerCase())
      this.all_price = res.data.all_price
      this.referPrice = this.all_price[this.activeCurrency.toLowerCase()]
    })

    otcApi.ctcPaymentMethodList({ language: this.$i18n.locale }).then(res => {
      if(res.data.length){
        this.isPay =true
      }else{
        this.isPay = false
      }
    })
    
  },
  methods: {
    changeOrderType(order_type){
      this.buyAmount = ''
      this.buyNum = ''
      this.sellAmount = ''
      this.sellNum = ''
      this.order_type = order_type
    },
    getPriceList(type){
      //获取承兑商支付方式列表
      otcApi.c2cgetBestPrice({
        order_type: this.order_type == 'Amount' ? 'by_amount' : 'by_num',
        amount: this.isBuy ? this.buyAmount : this.sellAmount,
        coin_amount: this.isBuy ? this.buyNum : this.sellNum,
        direction: this.isBuy ? 'buy' : 'sell',
        currency: this.exchangeCurrency,
        symbol: this.activeCurrency.toLowerCase(),
        language: this.$i18n.locale
      }).then(data => {
          this.paymentMethod = data
          if (this.paymentMethod.length==0){
            this.$toast(this.$t('无匹配的承兑商'))
            return
          }else{
            this.enterTrade = true;
            this.info = {
              type: this.order_type,
              num: this[type + this.order_type]
            }
          }
      })
    },
    changeTab(item){
      this.buyAmount = ''
      this.buyNum = ''
      this.sellAmount = ''
      this.sellNum = ''
      this.activeCurrency = item.title
      this.referPrice = this.all_price[this.activeCurrency.toLowerCase()]
    },
    updataToken(){
      otcApi.getSessionToken({
        currency: this.exchangeCurrency
      }).then(res => {
        this.session_token = res.data.session_token;
      })
    },
    showPopup() {
      this.show = true
    },
    onSelect(action) {

      if (action.text == this.$t('接单模式')) {
        this.showJie = true
        return
      }

      this.$router.push({
        path: action.path,
      })
    },
    handleClick() {
      const type = this.isBuy ? 'buy' : 'sell';
      if (!this[type + this.order_type]) {
        const text = this.order_type === 'Amount' ? this.$t('金额') : this.$t('数量')
        Toast(this.$t('请输入') + text)
      } else {
        if (this.isPay){
          this.getPriceList(type)
        }else{
          this.$toast(this.$t('请添加收款方式'))
          setTimeout(() => {
            this.$router.push('/paymentMethod')
          }, 500);
        }
      }
    }
  },
  computed: {
    ...mapGetters("c2c", ["exchangeCurrency",'currencySymbol']),
    fullType() {
      return this.isBuy ? 'buy' : 'sell'
    }
  },
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Popover.name]: Popover,
    [Button.name]: Button,
    EnterTrade,
  }
}
</script>

<style lang="scss" scoped>
.box-radius {
  border-radius: 40px;
}

.type {
  color: #B8BCC5;

  .active {
    color: $c2c_color;
  }
}

.currency {
  .active {
    p {
      color: #1A6EBD !important;
    }
  }

  & > div {
    padding: 10px 50px;
    margin-right: 30px;
    border-radius: 12px;
    background: $tab_background;

    &:last-child {
      margin: 0;
    }
  }

  p:first-child {
    margin-bottom: 8px;
    font-weight: 500;
    color: #595C61;
  }

  p:last-child {
    color: #868C9A;
  }
}

.item {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.input {
  span {
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
